<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务状态检查</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 2rem; }
        #status { font-weight: bold; }
        .good { color: green; }
        .bad { color: red; }
    </style>
</head>
<body>
    <h1>服务状态检查</h1>
    <div>
        <button onclick="checkStatus()">检查状态</button>
        <p>状态: <span id="status">未检查</span></p>
        <pre id="details"></pre>
    </div>

    <script>
        function checkStatus() {
            document.getElementById('status').textContent = "检查中...";
            document.getElementById('status').className = "";
            
            fetch('/api/check')
                .then(res => res.json())
                .then(data => {
                    document.getElementById('status').textContent = "运行正常";
                    document.getElementById('status').className = "good";
                    document.getElementById('details').textContent = 
                        JSON.stringify(data, null, 2);
                })
                .catch(err => {
                    document.getElementById('status').textContent = "服务异常";
                    document.getElementById('status').className = "bad";
                    document.getElementById('details').textContent = 
                        err.message;
                });
        }
    </script>
</body>
</html>